<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jCarousel实例</title>
<link href="../style.css" rel="stylesheet" type="text/css" />

<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.2.3.pack.js"></script>

<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.pack.js"></script>

<!--
  jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="../lib/jquery.jcarousel.css" />

<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/ie7/skin.css" />

<script type="text/javascript">
	function mycarousel_itemLoadCallback(carousel, state){
		// Since we get all URLs in one file, we simply add all items
		// at once and set the size accordingly.
		if (state != 'init'){
			return;
		}
		jQuery.get('dynamic_ajax.txt', function(data) {
			mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, data);
		});
	};
	
	function mycarousel_itemAddCallback(carousel, first, last, data){
		// Simply add all items at once and set the size accordingly.
		var items = data.split('|');
		for (i = 0; i < items.length; i++) {
			carousel.add(i+1, mycarousel_getItemHTML(items[i]));
		}
	
		carousel.size(items.length);
	};
	
	/**
	 * Item html creation helper.
	 */
	function mycarousel_getItemHTML(url){
		return '<img src="' + url + '" width="75" height="75" alt="" />';
	};
	
	jQuery(document).ready(function() {
		jQuery('#mycarousel').jcarousel({
			itemLoadCallback: mycarousel_itemLoadCallback
		});
	});
</script>
</head>

<body>
<div id="wrap">
  <h1>jCarousel</h1>
  <h2>jQuery下的滚动切换传送插件</h2>
  
  <h3>通过Ajax加载滚动切换的动态内容</h3>
  <p>数据加载自一个简单的文本文件，此文件包含需要的图片URL路径。</p>

  <div id="mycarousel" class="jcarousel-skin-ie7">
    <ul>
      <!-- 内容会被动态加载到这里 -->
    </ul>
  </div>

</div>
</body>
</html>